<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Textarea</view>
			<view class="tui-page__desc">多行输入框组件是对原生textarea组件的增强，内置了常用布局样式，同时包含 textarea 所有功能。</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title">默认使用</view>
			<tui-textarea placeholder="请输入内容"></tui-textarea>
			<view class="tui-title">带标题 | 必填项</view>
			<tui-textarea required flexStart label="简介" placeholder="请输入简介"></tui-textarea>
			<view class="tui-title">调整高度</view>
			<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
			<tui-textarea height="40rpx" min-height="40rpx" label="简介" placeholder="请输入一句话简介"></tui-textarea>
			<!-- #endif -->
			
			<!-- #ifdef APP-NVUE || MP-TOUTIAO -->
			<tui-textarea height="40rpx" min-height="40rpx" label="简介"></tui-textarea>
			<!-- #endif -->

			<view class="tui-title">带边框</view>
			<view class="tui-textarea-wrap">
				<tui-textarea textareaBorder placeholder="请输入简介"></tui-textarea>
			</view>

			<view class="tui-title">输入长度计数</view>
			<tui-textarea isCounter placeholder="请输入简介" v-model="intro"></tui-textarea>
			<view class="tui-title">更多使用请查看文档</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//v-model 双向绑定
				intro: ''
			}
		},
		methods: {

		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-left__icon {
		padding-right: 20rpx;
	}
	
	.tui-textarea-wrap{
		/* #ifndef APP-NVUE */
		width: 100%;
		box-sizing:border-box;
		/* #endif */
		padding: 26rpx 30rpx;
		flex: 1;
	}
</style>
